import styles from './userRow.module.scss';
import { useState } from 'react';
import { message } from 'antd';
const UserRow = ({ data, onDelete, index, onEdit }) => {
    const {
        username,
        avatar,
        gender,
        phone,
        introduction,
        role,
        loginId,
        password
    } = data;

    const [isEditing, setIsEditing] = useState(false);
    const [editedData, setEditedData] = useState({
        username,
        gender,
        phone,
        introduction,
        role,
        password
    });

    const handleEdit = () => {
        setIsEditing(true);
    };

    const handleSave = () => {
        onEdit(loginId, editedData);
        setIsEditing(false);
        message.success('修改成功');
    };

    const handleCancel = () => {
        setEditedData({
            username,
            gender,
            phone,
            introduction,
            role,
            password
        }); 
        setIsEditing(false);
    };

    const handleChange = (e) => {
        const { name, value } = e.target;
        setEditedData(prev => ({
            ...prev,
            [name]: value
        }));
    };

    return (
        <div className={styles.userRow}>
            <div className={styles.userRow__cell} title={index}>{index}</div>
            {isEditing ? (
                <>
                    <div className={styles.userRow__cell}>
                        <input
                            type="text"
                            name="username"
                            value={editedData.username}
                            onChange={handleChange}
                            className={styles.userRow__input}
                        />
                    </div>
                    <div className={styles.userRow__cell}>
                        <img src={avatar} alt={username} className={styles.userRow__avatar} />
                    </div>
                    <div className={styles.userRow__cell}>
                        <select
                            name="gender"
                            value={editedData.gender}
                            onChange={handleChange}
                            className={styles.userRow__select}
                        >
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div className={styles.userRow__cell}>
                        <input
                            type="text"
                            name="phone"
                            value={editedData.phone}
                            onChange={handleChange}
                            className={styles.userRow__input}
                        />
                    </div>
                    <div className={styles.userRow__cell}>
                        <input
                            type="text"
                            name="introduction"
                            value={editedData.introduction}
                            onChange={handleChange}
                            className={styles.userRow__input}
                        />
                    </div>
                    <div className={styles.userRow__cell}>
                        <select
                            name="role"
                            value={editedData.role}
                            onChange={handleChange}
                            className={styles.userRow__select}
                        >
                            <option value="教师/学生">教师/学生</option>
                            <option value="管理员">管理员</option>
                        </select>
                    </div>
                    <div className={styles.userRow__cell} title={loginId}>{loginId}</div>
                    <div className={styles.userRow__cell}>
                        <input
                            type="text"
                            name="password"
                            value={editedData.password}
                            onChange={handleChange}
                            className={styles.userRow__input}
                        />
                    </div>
                    <div className={styles.userRow__cell}>
                        <button
                            className={styles.userRow__saveBtn}
                            onClick={handleSave}
                        >
                            保存
                        </button>
                        <button
                            className={styles.userRow__cancelBtn}
                            onClick={handleCancel}
                        >
                            取消
                        </button>
                    </div>
                </>
            ) : (
                <>
                    <div className={styles.userRow__cell} title={username}>{username}</div>
                    <div className={styles.userRow__cell}>
                        <img src={avatar} alt={username} className={styles.userRow__avatar} />
                    </div>
                    <div className={styles.userRow__cell} title={gender}>{gender}</div>
                    <div className={styles.userRow__cell} title={phone}>{phone}</div>
                    <div className={styles.userRow__cell} title={introduction}>{introduction || '没有个人简介~'}</div>
                    <div className={styles.userRow__cell} title={role}>{role}</div>
                    <div className={styles.userRow__cell} title={loginId}>{loginId}</div>
                    <div className={styles.userRow__cell} title={password}>{password}</div>
                    <div className={styles.userRow__cell}>
                        <button
                            className={styles.userRow__editBtn}
                            onClick={handleEdit}
                        >
                            修改
                        </button>
                        <button
                            className={styles.userRow__deleteBtn}
                            onClick={() => onDelete(loginId)}
                        >
                            删除
                        </button>
                    </div>
                </>
            )}
        </div>
    );
};

export default UserRow; 